<template>
  <view
    class="thumb-box good"
    :key="item.id"
    @click="toDetail(good)"
  >
    <image :src="good.images" class="image"></image>
    <view class="right">
      <text class="name">{{ good.name }}</text>
      <text class="tips">{{ good.content }}</text>
      <view class="price_and_action">
        <text class="price">￥{{ good.price || 12.0 }}</text>
        <view class="btn-group" v-if="good.use_property">
          <up-button
            type="warning"
            class="btn property_btn"
            hover-class="none"
            size="mini"
            bgColor="#f0ad4e"
            @click="showGoodDetailModal(good)"
          >
            选规格
          </up-button>
          <view class="dot" v-show="goodCartNum(good.id)">{{
              goodCartNum(good.id)
            }}
          </view>
        </view>
        <view class="btn-group" v-else>
          <up-button
            type="default"
            v-show="goodCartNum(good.id)"
            plain
            class="btn reduce_btn"
            size="mini"
            hover-class="none"
            @tap="handleReduceFromCart(item, good)"
          >
            <view class="iconfont iconsami-select"></view>
          </up-button>
          <view class="number" v-show="goodCartNum(good.id)">{{
              goodCartNum(good.id)
            }}
          </view>
          <view
            class="btn add_btn"
            size="min"
            hover-class="none"
            @tap="handleAddToCart(item, good, 1)"
          >
            <up-icon
              size="30"
              name="plus-circle-fill"
              color="#f0ad4e"
              class="iconfont iconadd-select"
            ></up-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
const props = defineProps(["good", "item"]);
const emit = defineEmits(["goodCartNum", "toDetail", "handleAddToCart", "handleReduceFromCart", "showGoodDetailModal"]);
const goodCartNum = (item: any) => {
  emit("goodCartNum", item); // 或者 emit('delete', 123);
};
const toDetail = (item: any) => {
  emit("toDetail", item); // 或者 emit('delete', 123);
};
const handleAddToCart = (item: any) => {
  emit("handleAddToCart", item); // 或者 emit('delete', 123);
};
const handleReduceFromCart = (item: any) => {
  emit("handleReduceFromCart", item); // 或者 emit('delete', 123);
};
const showGoodDetailModal = (item: any) => {
  emit("showGoodDetailModal", item); // 或者 emit('delete', 123);
};
</script>
<style lang="scss" scoped>

.good {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;

  .image {
    width: 160rpx;
    height: 160rpx;
    margin-right: 20rpx;
    border-radius: 8rpx;
  }

  .right {
    flex: 1;
    height: 160rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding-right: 14rpx;

    .name {
      // font-size: $uni-font-size-base;
      margin-bottom: 10rpx;
    }

    .tips {
      width: 100%;
      height: 40rpx;
      line-height: 40rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: $uni-font-size-sm;
      color: $uni-text-color;
      margin-bottom: 10rpx;
    }

    .price_and_action {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price {
        //font-size: $uni-font-size-base;
        font-weight: 600;
      }

      .btn-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;

        .btn {
          padding: 0 20rpx;
          box-sizing: border-box;
          font-size: $uni-font-size-sm;
          // height: 44rpx;
          // line-height: 44rpx;

          &.property_btn {
            border-radius: 24rpx;
          }

          &.add_btn,
          &.reduce_btn {
            padding: 0;
            //width: 44rpx;
            border-radius: 44rpx;
          }
        }

        .dot {
          position: absolute;
          background-color: #ffffff;
          border: 1px solid $uni-color-primary;
          color: $uni-color-primary;
          font-size: $uni-font-size-sm;
          width: 36rpx;
          height: 36rpx;
          line-height: 36rpx;
          text-align: center;
          border-radius: 100%;
          right: -12rpx;
          top: -10rpx;
        }

        .number {
          width: 44rpx;
          height: 44rpx;
          line-height: 44rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>
